<template>
	<view>
		<uni-grid :column="3" :square="false" class="grid" border-color="#f8f8f8" highlight>
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
				<view class="grid-item-box" @click="switchTab(item.path, item.isTab)">
					<image :src="item.url" class="image" mode="aspectFill" />
					<text class="text">{{ item.text }}</text>
					<view v-if="item.badge" class="grid-dot">
						<uni-badge :text="item.badge" :type="item.type" />
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script setup>
	import {
		Toast
	} from "@/utils/uniHooks/toast";
	import {
		noticeTotalNumber
	} from "../todoList/api";
	import {
		useAuthStore
	} from "@/store/modules/auth";
	import {
		useRequest
	} from "v3hooks";
	import {
		storeToRefs
	} from "pinia";

	import {
		onMounted,
		reactive
	} from "vue";
	import {
		onHide,
		onShow
	} from "@dcloudio/uni-app";

	const store = useAuthStore();

	const list = reactive([{
			url: "/static/todoList/todoList.png",
			text: "待办事项",
			badge: 0,
			type: "error",
			path: "/pages/todoList/index",
			// isTab: true,
		},
		{
			url: "/static/todoList/notice.png",
			text: "工作通知",
			type: "error",
			path: "/pages/workNotice/index",
			// isTab: true,s
		},
		{
			url: "/static/todoList/tz.png",
			text: "通知公告",
			type: "success",
			path: "/pages/noticeList/index",
		},
		// {
		//   url: "/static/todoList/gcsb.png",
		//   text: "工程申报",
		//   type: "warning",
		// },
		// {
		//   url: "/static/todoList/stop.png",
		//   text: " 停工记录",
		//   type: "error",
		//   path: "/pages/stopList/index",
		// },
	]);

	onMounted(() => {
		if (Object.keys(store.pollingIntervalObjectFun).length) {
			return
		}
		const {
			data,
			error,
			cancel,
			run
		} = useRequest(noticeTotalNumber, {
			formatResult: (res) => res.data,
			// pollingWhenHidden: true,
			pollingInterval: 10000,
			debounceInterval: 1000,
			onSuccess: (res) => {
		
				store.setNotice(res);
				list[0].badge = res?.pendingTaskQty;
				list[1].badge = res?.unreadQty;

			},
			onError() {
				cancel();
			},
		});
		store.setOrcancelPollingInterval("noticeTotalNumber", cancel);
	});

	const switchTab = (url, isTab) => {
		if (url && isTab) {
			uni.switchTab({
				url,
			});
		} else if (url) {
			uni.navigateTo({
				url,
			});
		} else {
			Toast("暂未开通");
		}
	};
</script>

<style scoped lang="scss">
	.grid {
		// background-color: $uni-bg-color-grey;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: $uni-font-size-sm;
		margin-top: 5px;
		color: gray;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 25px 0;
		border: 0;
		background-color: white;
		margin: 1px;
		border-radius: 5px;
		position: relative;

		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	}
</style>
